<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>我的账单</title>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<link href="css/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" />
		<link href="css/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" />
		<link href="css/mobiscroll.android-ics-2.5.2.css" rel="stylesheet" type="text/css" />
	</head>
	<style type="text/css">
		html,body{background: #fff;}
		/*移动端1px下边线*/
		.border{ position: relative; }
		.border:after{ content: ''; display:block; position: absolute; width: 100%; left: 0px; bottom: 0px;height: 1px; background-color:  #bdbcbc; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);}
		.order_head{height: 3.7rem;background: #00a9ee;font-size: 0.32rem;color: #fff;position: fixed;top: 0;left: 0;width: 100%;z-index: 2;}
		.order_head_top{height: 1.6rem;position: relative;text-align: center;padding-top: 0.8rem;}
		.order_head_bottom{height: 1.38rem;background: #1094ca;}
		.today-text{position: absolute;top: 10px;margin-left: 0.3rem;}
		.today-money{font-size: 0.8rem;}
		.today-money span{font-size: 0.4rem;margin-left: 3px;}
		.order_head_top img{height: 0.28rem;width: auto;position: absolute;right: 0.2rem;bottom: 0.2rem;}
		.screen{position: absolute;right: 0.3rem;top: 10px;}
		.order_head_bottom img{height: 0.26rem;width: auto;display: block;margin: 0 auto;}
		.order_row{height: 1.1rem;text-align: center;}
		.order_row_left{height: 0.8rem;width: 49.8%;}
		.order_row_right{height: 0.8rem;width: 50.2%;border-left: 1px solid #2ca1d0;}
		.order_list{font-size: 0.3rem;height: auto;}
		.order_itemBox{height: auto;}
		.order_item_h{height: 0.7rem;background: #fbfafa;padding:0 0.3rem;}
		.order_item_c{padding-left: 0.3rem;height: auto;}
		.order_item{padding: 0 0.3rem 0 0;height: 1.3rem;}
		.imgbox{height: 0.8rem;width: auto;margin-right: 0.3rem;}
		.imgbox img{height: 0.4rem;width: auto;}
		.tips{margin-right: 0.1rem;text-align: center;}
		.zanwulogo{height: 3rem;width: 3rem;font-size: 0.28rem;margin: 2rem auto;text-align: center;color:#999;}
		.zanwulogo img{height: 2.2rem;width: 3rem;margin-bottom: 0.2rem;}
		.tips-t{color: #858585;font-size: 0.26rem;margin-top: 3px;}
		.money-stat-succ{font-size: 0.36rem;line-height: 0.36rem;color: #01a93c;}
		.img-fail{-webkit-filter: grayscale(95%); -moz-filter: grayscale(95%); -ms-filter: grayscale(95%);-o-filter: grayscale(95%);filter: grayscale(95%);filter: gray;}
		.text-fail{color:#858585;}
		.fail{color: #858585;text-decoration: line-through;}
		.main-model{position: fixed;top: 0;left: 0px;height:100%;width: 100%;background: rgba(0,0,0,.3);font-size: 0.3rem;z-index: 3;}
		.model-right{height: 100%;width: 6rem;background: #fff;position: absolute;top: 0;right:-1000px;}
		.model-left{height: 100%;width: 100%;position: absolute;top: 0;left:0;}
		.mod-Box{padding: 0.38rem 0.34rem;}
		.mod-Box input{height: 0.6rem;width: 1.8rem;color: #fff;background: #71d4fd;margin-left: 15px;border-radius: 7px;padding-left: 0.2rem;line-height: 0.6rem;}
		.pay-item{width: 1.8rem;height: 0.6rem;border:solid 1px #bdbcbc;border-radius: 7px;margin-top: 0.25rem;font-size: 0.26rem;}
		.pay-item img{height: 0.34rem;width: auto;margin-left: 0.1rem;margin-right: 2px;}
		.bottom-group{height: 1.04rem;border-top:solid 1px #bdbcbc;position: absolute;bottom: 0;left: 0;width: 100%;font-size: 0.34rem;}
		.buttom-left{width: 50%;height: 80%;}
		.buttom-right{width: 50%;border-left:solid #e3e4e5 1px;height: 80%;}
		.timeBox{margin-top: 0.3rem;}
		.active{background: #00a9ee;border: none;color: #fff;}
	</style>
	<body>
		<div id="headBox"></div>
		<div style="height: 4.1rem;"></div>
		<!--账单列表-->
		<div id="orderList"></div>
		<!--筛选model层-->
		<div class="main-model" hidden>
			<div class="model-left"></div>
			<div class="model-right">
				<!--收款方式-->
				<div class="mod-Box border pay-type">
					<p style="font-size: 0.34rem;">收款方式</p>
					<div class="flex">
						<div class="pay-item flex flex-align-center" data-type = "10">
							<img class="wechat" src=""/>
							<p>微信</p>
						</div>
						<div class="pay-item flex flex-align-center" style="margin-left: 0.2rem;" data-type = "20">
							<img class="alipay" src=""/>
							<p>支付宝</p>
						</div>
						<div class="pay-item flex flex-align-center" style="margin-left: 0.2rem;" data-type = "40">
							<img class="bank" src=""/>
							<p>银联</p>
						</div>
					</div>
					<div class="flex">
						<div class="pay-item flex flex-align-center" data-type = "60">
							<img class="jd" style="height: 0.3rem;width: auto;" src=""/>
							<p>京东钱包</p>
						</div>
						<div class="pay-item flex flex-align-center" style="margin-left: 0.2rem;" data-type = "70">
							<img class="baidu" src=""/>
							<p>百度钱包</p>
						</div>
						<div class="pay-item flex flex-align-center" style="margin-left: 0.2rem;" data-type = "30">
							<img class="qq" src=""/>
							<p>QQ钱包</p>
						</div>
					</div>
				</div>
				<!--交易时间-->
				<div class="mod-Box border">
					<p style="font-size: 0.34rem;">交易时间</p>
					<div class="timeBox flex flex-align-center">
						<p style="color: #7d7f81;">开始时间</p>
						<input readonly="true"  id="start"/>
					</div>
					<div class="timeBox flex flex-align-center">
						<p style="color: #7d7f81;">结束时间</p>
						<input readonly="true"  id="end"/>
					</div>
				</div>
				<!--交易状态-->
				<div class="mod-Box border pay-start">
					<p style="font-size: 0.34rem;">交易状态</p>
					<div class="flex">
						<div class="pay-item flex flex-align-center flex-pack-center" style="margin-left: 0.2rem;" data-type = "2">
								<p>收款成功</p>
						</div>
						<div class="pay-item flex flex-align-center flex-pack-center" style="margin-left: 0.2rem;" data-type = "1">
								<p>收款失败</p>
						</div>
						<div class="pay-item flex flex-align-center flex-pack-center" style="margin-left: 0.2rem;" data-type = "6">
								<p>通道关闭</p>
						</div>
					</div>
				</div>
				<!--到账方式-->
				<div class="mod-Box pay-daoz">
					<p style="font-size: 0.34rem;">到账方式</p>
					<div class="flex">
						<div class="pay-item flex flex-align-center flex-pack-center" style="margin-left: 0.2rem;" data-type = "D0">
								<p>D0 到账</p>
						</div>
						<div class="pay-item flex flex-align-center flex-pack-center" style="margin-left: 0.2rem;" data-type = "T0">
								<p>T0 到账</p>
						</div>
						<div class="pay-item flex flex-align-center flex-pack-center" style="margin-left: 0.2rem;" data-type = "T1">
								<p>T1 到账</p>
						</div>
					</div>
				</div>
				<!--底部按钮group-->
				<div class="bottom-group">
					<div class="flex flex-align-center" style="height: 100%;">
						<div class="buttom-left flex flex-align-center flex-pack-center"><p>重置</p></div>
						<div class="buttom-right flex flex-align-center flex-pack-center"><p>确定</p></div>
					</div>
				</div>
			</div>
		</div><!--筛选model层结束-->
		<script type="text/html" id = "headbox_template">
			<div class="order_head">
			<div class="order_head_top">
				<p class="today-text">今日交易<span style="font-size: 0.38rem;margin: 0 3px;"><%= data.toDayCount %></span>笔</p>
				<p class="today-money"><%= data.toDayAmt %><span>元</span></p>
				<img src="" alt="" />
				<p class="screen" onclick="order.orderScreen()">筛选</p>
			</div>
			<div class="order_head_bottom">
					<img src="" alt="" />
					<div class="order_row flex flex-align-center">
						<div class="order_row_left">
							<p style="font-size: 0.4rem;margin-top: -7px;"><%= data.totalAmt %></p>
							<p style="font-size: 0.28rem;">本月交易(元)</p>
						</div>
						<div class="order_row_right">
							<p style="font-size: 0.4rem;margin-top: -7px;"><%= data.totalCount %></p>
							<p style="font-size: 0.28rem;">本月交易(笔)</p>
						</div>
					</div>
			</div>
		</div>
		</script>
		<!--账单列表模板-->
		<script type="text/html" id="template_orderList">
			<div class="order_list">
				<!--账单分组-->
				<%for(var i=0;i<data.length;i++){%>
				<div class="order_itemBox">
					<div class="order_item_h flex flex-align-center">
						<div class="flex-1" style="color: #91918e;"><%= data[i].groupDate %></div>
						<div>共<%= data[i].totalCount %>笔 <%= data[i].totalAmt %>元</div>	
					</div>
					<div class="order_item_c">
						<%for(var j=0;j<data[i].records.length;j++){%>
						<div class="order_item flex flex-align-center <%if(j+1 != data[i].records.length){%> border <%}%>" data-id="<%= data[i].records[j].id %>" onclick="order.orderJump(this)">
							<div class="imgbox flex flex-align-center">
								<img class="<%if(data[i].records[j].payStatusCode ==1 || data[i].records[j].payStatusCode ==6 || data[i].records[j].payStatusCode ==0){%> img-fail <%}%>" src="<%= data[i].records[j].payModeIcon %>"/>
							</div>
							<div class="flex-1">
								<p class="<%if(data[i].records[j].payStatusCode ==1 || data[i].records[j].payStatusCode ==6 || data[i].records[j].payStatusCode ==0){%> text-fail <%}%>"><%= data[i].records[j].tradeTypeName %></p>
								<p class="tips-t"><%= data[i].records[j].createTime %> <%= data[i].records[j].channelName %></p>
							</div>
							<div class="tips">
								<p class="money-stat-succ <%if(data[i].records[j].payStatusCode ==1 || data[i].records[j].payStatusCode ==6 || data[i].records[j].payStatusCode ==0){%> fail <%}%>"><%= data[i].records[j].orderAmount %>元</p>
								<p class="tips-t"><%= data[i].records[j].payStatusName %></p>
							</div>
						</div>
						<%}%>
					</div>
				</div><!--单个账单分组结束-->
				<%}%>
			</div>
		</script>
	</body>
	<script type="text/javascript" src="js/rem.js"></script>
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/layer.js"></script>
	<script type="text/javascript" src="js/api.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript" src="js/template.js"></script>
	<script type="text/javascript" src="js/iscroll.js"></script>
	<script src="js/mobiscroll.core-2.5.2.js" type="text/javascript"></script>
	<script src="js/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script>
	<script src="js/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script>
	<script src="js/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script>
	<script src="js/mobiscroll.android-ics-2.5.2.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/orderlist.js"></script>
</html>
